import React, { useEffect } from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'

const Home = React.lazy(() => import('../pages/Home'))
const My = React.lazy(() => import('../pages/My'))
const Okecheng = React.lazy(() => import('../pages/KeCheng'))
/* 底部导航栏组件 */
import Tabbars from '../component/Tabbars'

import { useSelector, useDispatch } from 'react-redux'
import { async_getwatch } from '../store/crmsSlice'


const QuanBu = React.lazy(() => import('../pages/child/quanBu'))
const ZhuanLan = React.lazy(() => import('../pages/child/ZhuanLan'))
const ZhiBo = React.lazy(() => import('../pages/child/ZhiBo'))
const KeCheng = React.lazy(() => import('../pages/child/KeCheng'))

export default function AppRouter() {




    return (
        <div>
            {/* 配置路由 */}
            <BrowserRouter>
                {/* 底部导航栏 */}
                <Tabbars></Tabbars>
                <Routes>
                    <Route path='/home' element={<Home />} >
                        {/* 子级路由 */}
                        <Route index  element={<QuanBu />} />
                        <Route path='/home/zhuanlan' element={<ZhuanLan />} />
                        <Route path='/home/zhibo' element={<ZhiBo />} />
                        <Route path='/home/kecheng' element={<KeCheng />} />
                    </Route>
                    <Route path='/okecheng' element={<Okecheng />} />
                    <Route path='/my' element={<My />} />
                    {/* 路由重定向 */}
                    <Route path='/' element={<Navigate to='/home' />} />
                </Routes>
            </BrowserRouter>
        </div>
    )
}
